import React, { memo } from 'react';
import { withRouter } from 'react-router';
import { Avatar } from 'antd';
import { Popover, Button } from 'antd';

import './style.less';

export default withRouter(
  memo(function AppHeader(props) {
    const name = window.localStorage.getItem('name');
    const logout = () => {
      window.localStorage.clear();
      props.history.push('/login');
    };
    const text = <span>选项</span>;
    const content = (
      <div>
        <p
          className="logout"
          style={{ color: '#0066ff', fontSize: '13px', cursor: 'pointer' }}
          onClick={() => logout()}
        >
          退出登录
        </p>
      </div>
    );

    return (
      <div className="app-header">
        <Popover
          placement="bottom"
          title={text}
          content={content}
          trigger="click"
        >
          <Button className="name">{name}</Button>
        </Popover>
        <Avatar size={40} className="avatar">
          Admin
        </Avatar>
      </div>
    );
  }),
);
